<template>
  <div id="home">
    <van-grid :column-num="1" :center="false">
      <!-- 住户基本信息 -->
      <van-grid-item class="green">
        <div class="grid-div">
          <van-row>
            <van-col span="24">
              <van-row>
                <van-col span="8">
                  <van-row>
                    <van-col span="24" style="font-size: 80px; height: 80px"
                      ><van-icon name="user-circle-o"
                    /></van-col>
                  </van-row>
                  <van-row>
                    <van-col span="24" style="font-size: 20px"
                      ><span>用户信息</span></van-col
                    >
                  </van-row>
                </van-col>
                <van-col span="16" style="height: 106px">
                  <van-row>
                    <van-col span="24" style="line-height: 46px; height: 46px"
                      ><span style="font-size: 40px">{{
                        tenant.guest_name
                      }}</span></van-col
                    >
                  </van-row>
                  <van-row style="line-height: 20px">
                    <van-col span="7">
                      <span style="font-size: 14px">电话</span>
                    </van-col>
                    <van-col span="17">
                      <span style="font-size: 14px">{{
                        setPhoneNumber(tenant.guest_phone)
                      }}</span>
                    </van-col>
                  </van-row>
                  <van-row style="line-height: 20px">
                    <van-col span="7"
                      ><span style="font-size: 14px">身份证</span></van-col
                    >
                    <van-col span="17"
                      ><span style="font-size: 14px">{{
                        setIdCardNumber(tenant.guest_nbr)
                      }}</span></van-col
                    >
                  </van-row>
                  <van-row style="line-height: 20px">
                    <van-col span="7"
                      ><span style="font-size: 14px">合同期限</span></van-col
                    >
                    <van-col span="17"
                      ><span style="font-size: 12px">{{
                        tenant.guest_date1 + "~" + tenant.guest_date2
                      }}</span></van-col
                    >
                  </van-row>
                </van-col>
              </van-row>
            </van-col>
          </van-row>
        </div>
      </van-grid-item>
      <!-- 房间信息 -->
      <van-grid-item class="deep-blue" style="margin-top: 10px">
        <div class="grid-div">
          <van-row>
            <van-col span="24">
              <van-row>
                <van-col span="8">
                  <van-row>
                    <van-col span="24" style="font-size: 80px; height: 80px"
                      ><van-icon name="wap-home-o"
                    /></van-col>
                  </van-row>
                  <van-row>
                    <van-col span="24" style="font-size: 20px"
                      ><span>房间信息</span></van-col
                    >
                  </van-row>
                </van-col>
                <van-col span="16">
                  <van-row>
                    <van-col span="24" style="height: 106px">
                      <van-row class="house-font">
                        <van-col span="24">
                          <span
                            >所在楼栋：{{ tenant.guest_about_building }}</span
                          >
                        </van-col>
                      </van-row>
                      <van-row class="house-font">
                        <van-col span="24">
                          <span>所在房间：{{ tenant.guest_about_house }}</span>
                        </van-col>
                      </van-row>
                    </van-col>
                  </van-row>
                </van-col>
              </van-row>
            </van-col>
          </van-row>
        </div>
      </van-grid-item>
      <!-- 费用 -->
      <van-grid-item class="purple" style="margin-top: 10px">
        <div class="grid-div">
          <van-row>
            <van-col span="24">
              <van-row>
                <van-col span="8">
                  <van-row>
                    <van-col span="24" style="font-size: 80px; height: 80px"
                      ><van-icon name="balance-o"
                    /></van-col>
                  </van-row>
                  <van-row>
                    <van-col span="24" style="font-size: 20px"
                      ><span>　费用　</span></van-col
                    >
                  </van-row>
                </van-col>
                <van-col span="16">
                  <van-row>
                    <van-col span="24" style="height: 106px">
                      <van-row class="network-font">
                        <van-col span="24"
                          ><span v-show="mode == 0 ? true : false"
                            >应付房租：{{ tenant.guest_price + "元" }}</span
                          ></van-col
                        >
                        <van-col span="24"
                          ><span v-show="mode == 1 ? true : false"
                            >应付房租：{{
                              house.house_price == undefined
                                ? ""
                                : house.house_price + "元"
                            }}</span
                          ></van-col
                        >
                      </van-row>
                      <van-row class="network-font">
                        <van-col span="24"
                          ><span v-show="mode == 0 ? true : false"
                            >应付水费：{{
                              tenant.guest_water_price + "元"
                            }}</span
                          ></van-col
                        >
                        <van-col span="24"
                          ><span v-show="mode == 1 ? true : false"
                            >应付水费：{{
                              house.house_water_price == undefined
                                ? ""
                                : house.house_water_price + "元"
                            }}</span
                          ></van-col
                        >
                      </van-row>
                      <van-row class="network-font">
                        <van-col span="24"
                          ><span v-show="mode == 0 ? true : false"
                            >应付电费：{{
                              tenant.guest_electric_price + "元"
                            }}</span
                          ></van-col
                        >
                        <van-col span="24"
                          ><span v-show="mode == 1 ? true : false"
                            >应付电费：{{
                              house.house_electric_price == undefined
                                ? ""
                                : house.house_electric_price + "元"
                            }}</span
                          ></van-col
                        >
                      </van-row>
                      <van-row class="network-font">
                        <van-col span="24"
                          ><span
                            >应付网费：{{
                              tenant.guest_network_price == null
                                ? ""
                                : tenant.guest_network_price + "元"
                            }}</span
                          ></van-col
                        >
                      </van-row>
                    </van-col>
                  </van-row>
                </van-col>
              </van-row>
            </van-col>
          </van-row>
        </div>
      </van-grid-item>
      <!-- 水表 -->
      <van-grid-item class="blue" style="margin-top: 10px">
        <div class="grid-div">
          <van-row>
            <van-col span="24">
              <van-row>
                <van-col span="6">
                  <van-row>
                    <van-col span="24" style="font-size: 80px; height: 80px"
                      ><van-icon name="notes-o"
                    /></van-col>
                  </van-row>
                  <van-row>
                    <van-col span="24" style="font-size: 20px"
                      ><span>　水表　</span></van-col
                    >
                  </van-row>
                </van-col>
                <van-col span="18">
                  <van-row>
                    <van-col
                      span="24"
                      style="
                        text-align: center;
                        height: 106px;
                        line-height: 106px;
                      "
                    >
                      <span style="font-size: 50px">{{
                        house.house_water_last == undefined
                          ? ""
                          : house.house_water_last + "吨"
                      }}</span>
                    </van-col>
                  </van-row>
                </van-col>
              </van-row>
            </van-col>
          </van-row>
        </div>
      </van-grid-item>
      <!-- 电表 -->
      <van-grid-item class="orange" style="margin-top: 10px">
        <div class="grid-div">
          <van-row>
            <van-col span="24">
              <van-row>
                <van-col span="6">
                  <van-row>
                    <van-col span="24" style="font-size: 80px; height: 80px"
                      ><van-icon name="notes-o"
                    /></van-col>
                  </van-row>
                  <van-row>
                    <van-col span="24" style="font-size: 20px"
                      ><span>　电表　</span></van-col
                    >
                  </van-row>
                </van-col>
                <van-col span="18">
                  <van-row>
                    <van-col
                      span="24"
                      style="
                        text-align: center;
                        height: 106px;
                        line-height: 106px;
                      "
                    >
                      <span style="font-size: 50px">{{
                        house.house_electric_last == undefined
                          ? ""
                          : house.house_electric_last + "度"
                      }}</span>
                    </van-col>
                  </van-row>
                </van-col>
              </van-row>
            </van-col>
          </van-row>
        </div>
      </van-grid-item>
      <!-- 网络 -->
      <van-grid-item class="peach" style="margin-top: 10px">
        <div class="grid-div">
          <van-row>
            <van-col span="24">
              <van-row>
                <van-col span="8">
                  <van-row>
                    <van-col span="24" style="font-size: 80px; height: 80px"
                      ><van-icon name="desktop-o"
                    /></van-col>
                  </van-row>
                  <van-row>
                    <van-col span="24" style="font-size: 20px"
                      ><span>　网络　</span></van-col
                    >
                  </van-row>
                </van-col>
                <van-col span="16" style="height: 106px; padding-top: 1px">
                  <van-row class="network-font">
                    <van-col span="24">
                      <span>账号：{{ network.username }}</span>
                    </van-col>
                  </van-row>
                  <van-row class="network-font">
                    <van-col span="24">
                      <span>密码：{{ network.passwd }}</span>
                    </van-col>
                  </van-row>
                  <van-row class="network-font">
                    <van-col span="24">
                      <span
                        >设备：{{
                          network.share == undefined ? "" : network.share + "台"
                        }}</span
                      >
                    </van-col>
                  </van-row>
                  <van-row class="network-font">
                    <van-col span="24">
                      <span
                        >速度：{{
                          network.download == undefined
                            ? ""
                            : network.download + "KB/S"
                        }}</span
                      >
                    </van-col>
                  </van-row>
                </van-col>
              </van-row>
            </van-col>
          </van-row>
        </div>
      </van-grid-item>
    </van-grid>
    <div style="height: 3.5rem"></div>
  </div>
</template>

<script>
import { Toast } from "vant";

export default {
  data() {
    return {
      tenant: {},
      house: {},
      network: {},
      mode: this.$store.state.mode,
      network_reset_num: 0,
    };
  },
  methods: {
    getTenantDetail() {
      this.$axios({
        method: "post",
        url: "/api/guestapi/dispatcher",
        data: {
          action: "include", //控制参数
          type: "unionid", //guest_id = 用住户id查询  ， unionid = 用住户微信id查
          guest_unionid: this.$store.state.unionid,
        },
      }).then((res) => {
        if (res.data.ret == 0) {
          this.tenant = res.data.data[0];
          this.$store.dispatch("setTenant", {
            id: this.$AES.encrypt(this.tenant.guest_id),
            house_id: this.$AES.encrypt(this.tenant.guest_about_house_id),
            building_id: this.$AES.encrypt(this.tenant.guest_about_building_id),
            openid: this.$AES.encrypt(this.tenant.guest_openid),
            user_openid: this.$AES.encrypt(this.tenant.guest_user_openid),
          });
          if (
            this.tenant.guest_user_openid == "" ||
            this.tenant.guest_user_openid == null ||
            this.tenant.guest_user_openid == "None"
          ) {
            this.saveOpenid(
              localStorage.getItem("extra_tenant_user_openid"),
              this.tenant.guest_id
            );
          }
          let face_status = res.data.data[0].guest_face_type;
          if (
            (face_status == "0" || face_status == null) &&
            this.$store.state.mode == "1"
          ) {
            this.$router.replace("/faceadd");
          } else {
            this.getHouseDetail();
          }
        }
      });
    },
    saveOpenid(openid, tenant_id) {
      this.$axios({
        method: "post",
        url: "/api/guestapi/dispatcher",
        data: {
          action: "re", //控制参数
          key: ["guest_user_openid"],
          value: [openid],
          guest_id: tenant_id,
        },
      }).then((res) => {
        console.log(res.data);
      });
    },
    setPhoneNumber(val) {
      if (val) {
        return val.substring(0, 3) + "****" + val.substring(7);
      }
    },
    setIdCardNumber(val) {
      if (val) {
        return val.substring(0, 4) + "**********" + val.substring(14);
      }
    },
    getHouseDetail() {
      let house_id = this.$AES.decrypt(this.$store.state.tenant.house_id);
      if (house_id != "null") {
        this.$axios({
          method: "post",
          url: "/api/houseapi/dispatcher",
          data: {
            action: "list_id", //控制参数
            house_id: house_id,
          },
        }).then((res) => {
          if (res.data.ret == 0) {
            this.house = res.data.data[0];
            this.getNetWorkDetail();
          }
        });
      }
    },
    getNetWorkDetail() {
      if (this.tenant.guest_network_name && this.house.house_about_id) {
        let toast = Toast.loading({
          duration: 0,
          forbidClick: true,
          message: "加载中...",
        });
        this.$axios({
          method: "post",
          url: "/api/ikuaiapi/dispatcher",
          data: {
            action: "user", //控制参数
            building_id: this.house.house_about_id,
            username: this.tenant.guest_network_name,
          },
        })
          .then((res) => {
            if (res.data.ErrorCode % 10000 == 0) {
              this.network = res.data.Data[0];
            } else if (this.network_reset_num < 3) {
              this.network_reset_num++;
              this.getNetWorkDetail();
            }
          })
          .finally(() => {
            toast.clear();
          });
      }
    },
  },
  mounted() {
    this.getTenantDetail();
  },
};
</script>

<style scoped>
#home {
  background: #f7f8fa;
  height: 100%;
  width: 100%;
  overflow: inherit;
}
.grid-div {
  margin: 3px;
  padding: 10px;
  height: 100px;
}
.network-font {
  font-size: 20px;
  line-height: 26px;
}
.house-font {
  font-size: 18px;
  line-height: 53px;
}
</style>
<style>
.blue .van-grid-item__content {
  padding: 8px;
  background-color: #0984e3;
  color: #fff;
}
.green .van-grid-item__content {
  padding: 8px;
  background-color: #00b894;
  color: #fff;
}
.peach .van-grid-item__content {
  padding: 8px;
  background-color: #e17055;
  color: #fff;
}
.orange .van-grid-item__content {
  padding: 8px;
  background-color: #f0932b;
  color: #fff;
}
.deep-blue .van-grid-item__content {
  padding: 8px;
  background-color: #22a6b3;
  color: #fff;
}

.purple .van-grid-item__content {
  padding: 8px;
  background-color: #6ab04c;
  color: #fff;
}
</style>